<template>
	<!-- 1. 根容器：全屏无边距，固定定位占满屏幕 -->
	<view class="id-card-container">
		<!-- 2. 胸卡主体：继承根容器尺寸，flex 纵向布局撑满 -->
		<view class="id-card" v-if="ifErrData(employeeData.startDate,employeeData.endDate)">
			<!-- 胸卡头部（logo + 标题） -->
			
				<view class="company-logo">
					<image class="logoimg" src="/static/logo.png" mode="aspectFit"></image>
				</view>
				
		
			<view class="title"><text class="card-title">巡仓检查授权</text></view>
			<text class="card-tip">此卡片监管内容仅限任务清单，严限本人使用</text>

			<!-- 3. 胸卡内容区：flex 1 自动占满剩余空间，避免留白 -->
			<view class="card-content">
				<view class="avatar-container" @click="previewImage(employeeData.photo?.url)" >
					<image class="avatar" :src="employeeData.photo?.url || defaultAvatar" mode="aspectFill"></image>
				</view>
				<!-- 左侧：员工信息（flex 纵向布局，自适应高度） -->
				<view class="employee-info">
					<view class="info-list">
						<view class="info-item">
							<text class="info-label">姓名：</text>
							<text class="info-value">{{ employeeData.name || '未填写' }}</text>
						</view>
						<view class="info-item">
							<text class="info-label">工号：</text>
							<text class="info-value">{{ employeeData.uid || '未填写' }}</text>
						</view>

						<view class="info-item">
							<text class="info-label">巡检有效期：</text>
							<text class="info-value"  >{{ formatDate(employeeData.startDate) }} - {{ formatDate(employeeData.endDate) }}</text>
						</view>
					</view>
				</view>
				<view class="task-title"><text class="task-label">任务清单：</text></view>
				<view class="task-item">
					<text class="task-value">{{ employeeData.task || '未分配' }}</text>
				</view>
				<!-- 右侧：二维码（自适应居中，避免溢出） -->
				<view class="qrcode-container">
					<text class="qrcode-title">授权码</text>
					<uqrcode ref="uqrcode" canvas-id="qrcode" :value="employeeData.accessCode" :options="options"></uqrcode>
					<text class="access-code-text">{{ employeeData.accessCode ? '仓管扫码验证' : '无授权!禁止入仓！！！' }}</text>
				</view>
			</view>

			<!-- 胸卡底部（固定高度，贴合底部） -->
			<view class="card-footer">
				<text class="company-name">供销云仓监管</text>
			
				<text class="company-name-2">技术支持：福建便利宝电子商务有限公司</text>
			</view>
		</view>
        <view class="overdata" v-else>
			<text>任务已过期！！！</text>
		</view>
		<!-- 操作按钮：固定在底部，不占胸卡主体空间（可选，按需求保留） -->
		<view class="action-btns" v-if="isAdmin">
			<button class="print-btn" @click="handlePrint">打印胸卡</button>
			<button class="share-btn" @click="handleShare">分享胸卡</button>
		</view>
	</view>
</template>

<script>

const db = uniCloud.databaseForJQL();
export default {
	data() {
		return {
			employeeData: {},
			// 移除手动设置的 windowHeight/windowWidth，改用 CSS 自适应
			defaultAvatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png',
			isPrinting: false,
			isAdmin: false,
			options: { margin: 10 }
		};
	},
	onLoad(res) {
		// if (!res.uid) {
		// 	uni.showToast({ title: '无授权信息', icon: 'none', duration: 3000 });
		// 	return;
		// }
		this.initData(res.uid);
		this.initData('5368')
		// 移除手动获取屏幕尺寸的代码，CSS 会自动适配
	},
	methods: {
		async initData(id) {
			const res = await db.collection('inspector').where({ uid: id }).get();
			if (res.data.length > 0) this.employeeData = res.data[0];
		},
		formatDate(timestamp) {
			if (!timestamp) return '未设置';
			const date = new Date(timestamp);
			return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
		},
		ifErrData(start,end){
			const starttime=new Date(start)
			const endtime=new Date(end)
			const timestamp=Date.now()
			console.log(start,end,timestamp);
			return timestamp>=starttime&&timestamp<=endtime
		},
		handlePrint() {
			/* 原有逻辑不变 */
		},
		previewImage(url) {
			uni.previewImage({
				urls: [url]
			});
		},
		handleShare() {
			/* 原有逻辑不变 */
		}
	}
};
</script>

<style scoped>
/* 1. 根容器：全屏无边距，固定定位覆盖整个屏幕 */


/* 2. 胸卡主体：占满根容器，flex 纵向布局，无多余边距 */
.id-card {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column; /* 纵向布局，子元素垂直排列 */
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	border: 1px solid #e5e7eb;
	overflow: hidden; /* 防止内部内容溢出 */
}
.title{
	margin: 15px auto 10px auto;
	font-size: 40px;
}
/* 3. 胸卡头部：固定高度，贴合顶部 */

.company-logo {
	margin-left: auto;
	margin-right: auto;
	height: 140px;
	
}
.logoimg{
	width: 100vw;
	height: 100px;
}
.logo-text {
	font-size: 30px;
	color: #007aff;
	font-weight: bold;
}
.card-title {
	font-size: 30px;
	font-weight: bold;
}
.overdata{
	font-size: 50px;
	color: #ffaa00;
	margin-top: 100px;
	margin-left: auto;
	margin-right: auto;
}
/* 4. 胸卡内容区：flex 1 自动占满剩余空间，避免留白 */
.card-content {
	flex: 1; /* 关键：占满父容器剩余高度 */
	display: flex;
	flex-direction: column; /* 纵向布局，信息在上，二维码在下 */
	justify-content: space-around; /* 内容均匀分布，避免拥挤 */
	padding: 15px; /* 内部边距，避免内容贴边 */
}

/* 5. 员工信息区：flex 纵向布局，自适应高度 */
.employee-info {
	display: flex;
	margin-left: auto;
	margin-right: auto;
	flex-direction: column;
	align-items: center; /* 水平居中 */
	}
.avatar-container {
	width: 200px;
	height: 300px;
	margin-left: auto;
	margin-right: auto;
	padding: 1px 1px;
	border-radius: 4px;
	margin-top: 30px;
	margin-bottom: 30px;
	overflow: hidden;
	border: 1px solid #e5e7eb;
}
.avatar {
	width: 100%;
	height: 100%;
}
.info-list {
	width: 100%; /* 占满父容器宽度，避免文字换行异常 */
	display: flex;
	flex-direction: column;
	gap: 12px; /* 信息项间距，适配不同屏幕 */
}
.info-item {
	display: flex;
	font-weight: 600;
	font-size: 30px; /* 相对单位，适配不同屏幕 */
	margin-top: 10px;
	margin-bottom: 10px;
}
.info-label {
	width: 200px; /* 固定标签宽度，对齐更整齐 */
}
.info-value {
	color: #939393;
	flex: 1;
	word-break: break-all; /* 长文本自动换行，避免溢出 */
}
.task-title{
	font-size: 25px;
    font-weight: bold;
	margin-top: 30px;
	margin-left: auto;
	margin-right: auto;
}
.task-item {
	display: flex;
	color: #007aff;
	font-weight: 600;
	margin: 25px 30px;
	height: 200px;
	padding: 10px 20px;
	font-size: 30px; /* 相对单位，适配不同屏幕 */
	line-height: 30px;
	border: 1px solid #007aff; /* 边框宽度+样式+颜色（与文字色呼应，视觉统一） */
	border-radius: 10px; /* 圆角弧度（rpx单位适配屏幕，数值越大圆角越明显） */

	padding: 15px 20px;
}
.task-label {
	color: #666;
	width: 150px; /* 固定标签宽度，对齐更整齐 */
}
.task-value {
	flex: 1;
	word-break: break-all; /* 长文本自动换行，避免溢出 */
}
/* 6. 二维码区：水平居中，自适应大小 */
.qrcode-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 10px; /* 与信息区保持间距 */
}
.qrcode-title {
	font-size: 20px;
	color: #333;
	margin-bottom: 8px;
	font-weight: 500;
}
/* 二维码组件自适应大小（避免固定尺寸导致溢出） */
uni-qrcode {
	width: 150px !important;
	height: 150px !important;
	margin-bottom: 8px;
}
.access-code-text {
	font-size: 20px;
	color: #ffaa00;
	font-weight: bolder;
	text-align: center;
	word-break: break-all;
	padding: 0 10px; /* 左右边距，避免文字贴边 */
}

/* 7. 胸卡底部：固定高度，贴合底部 */
.card-footer {
	background-color: #f5f7fa;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 12px;
	border-top: 1px solid #e5e7eb;
	/* 固定底部高度，避免被挤压 */
	height: 110px;
	display: flex;
	gap: 10px;
	flex-direction: column;
	justify-content: center; /* 内部文字垂直居中 */
}
.company-name {
	display: block;
	font-size: 20px;
	color: #333;
	text-align: center;
	font-weight: 600;
	margin-bottom: 4px;
}
.company-name-2 {
	display: block;
	font-size: 15px;
	color: #b6b6b6;
	text-align: center;
	font-weight: 600;
	margin-bottom: 4px;
}
.card-tip {
	display: block;
	font-size: 20px;
	color: red;
	text-align: center;
}

/* 8. 操作按钮：固定在底部，不遮挡胸卡内容（可选） */
.action-btns {
	position: fixed; /* 固定在屏幕底部 */
	bottom: 15px;
	left: 50%;
	transform: translateX(-50%); /* 水平居中 */
	display: flex;
	gap: 15px;
	width: 80%; /* 自适应宽度，避免过宽 */
	max-width: 300px;
	z-index: 99; /* 确保在最上层，不被遮挡 */
}
.print-btn,
.share-btn {
	flex: 1;
	padding: 10px 0;
	font-size: 14px;
	border-radius: 5px;
}
.print-btn {
	background-color: #007aff;
	color: #fff;
}
.share-btn {
	background-color: #4cd964;
	color: #fff;
}
</style>
